<template>
  <div class="u-relative icon-box">
    <van-image :height="props.height" :width="props.width" :src="src" />
    <div
      class="u-absolute icon-index"
      :style="{ fontSize: `${props.height / 4}px` }"
    >{{ props.index }}</div>
  </div>
</template>
<script setup>
import { computed, defineProps, ref } from "vue";
const imageBaseUrl = ref('https://steamcdn-a.akamaihd.net');
const talentTreeIconUrl = 'https://www.opendota.com/assets/images/dota2/talent_tree.svg'
const props = defineProps({
  height: {
    type: Number,
    default: 36,
  },
  width: {
    type: Number,
    default: 36,
  },
  index: {
    type: Number,
  },
  ability: {
    type: Object
  }
});
const src = computed(() => {
  return props.ability.img ? `${imageBaseUrl.value}${props.ability.img}` : talentTreeIconUrl
})
</script>
<style lang="scss" scoped>
.icon-box {
  display: inline-block;
  margin: 2px;
  background: #222222;
  .icon-index {
    color: #ffffff;
    padding: 2px;
    right: 0;
    bottom: 0;
  }
}
</style>
